<template>
	<view class="container">
		<view class="list-box">
			<view class="item" v-for="(item, index) in list" :key="index" @click="gotoFhjl(item)">
				<view class="left" style="font-size: 0">
					<image style="width: 196rpx; height: 196rpx; border-radius: 8rpx" :src="item.shop.avatar_url" mode=""></image>
				</view>
				<view class="right">
					<view class="top">
						{{ item.shop.shopname }}
					</view>
					<view class="bottom">
						<view>锁定总金额:￥{{ item.quota }}</view>
						<view>未到账总额:￥{{ item.wait_payment }}</view>
						<view>已返还金额:￥{{ item.rebate }}</view>
						<view>待解锁金额:￥{{ item.have_money }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad() {
		// 锁定
		this.$request({
			url: 'member/list',
			method: 'POST',
			data: {}
		}).then((res) => {
			const { code, msg, data } = res.data;
			if (code == 1) {
				this.suodingmoney = data.quota;
				this.jiesuanmoney = data.rebate;
				this.list = data.shop;
			} else {
				uni.showToast({
					title: msg,
					icon: 'error'
				});
			}
		});
	},
	methods: {
		gotoFhjl(item) {
			uni.setStorageSync('shopItemId', item.shop_id);
			uni.navigateTo({
				url: '/pages/filePages/membershipPage/returnRecord'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 30upx;
	.list-box {
		.item {
			display: flex;
			padding: 40upx 0;
			border-bottom: 2upx solid #f4f5f9;
			.left {
				width: 196upx;
				height: 196upx;
				borrr: 8upx;
				background-color: #d9d9d9;
				flex-shrink: 0;
				margin-right: 30upx;
			}
			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.top {
					font-size: 28upx;
				}
				.bottom {
					font-size: 26upx;
					color: #333;
					> view {
						padding-top: 10upx;
					}
				}
			}
		}
	}
}
</style>
